<template>
  <h1>Input 输入框</h1>
  <p>输入文字。</p>
  <h2>基础用法</h2>
  <p>基础的输入框用法</p>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-input v-model="value1" placeholder="请输入"></az-input>
        <p>输入的值是：{{ value1 }}</p>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example1 }}</code></pre>
    </div>
  </div>
  <h2>禁用状态</h2>
  <p>禁止文本框的输入</p>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-input placeholder="禁止输入" disabled></az-input>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example2 }}</code></pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const example1 = `<az-input placeholder="请输入"></az-input>`
const example2 = `<az-input placeholder="禁止输入" disabled></az-input>`
</script>
